<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校园惊魂·其二</title>
    <!-- <link rel="icon" type="image/svg+xml" href="logo.svg"> -->
    <link rel="stylesheet" href="styles.css">
    <style>
        @font-face {
            font-family: 'mplus_hzk_12';
            src: url('fonts/mplus_hzk_12.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }
    </style>
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
</head>

<body>
    <!-- 开场动画 -->
    <div id="intro-animation" class="intro-animation">
        <div id="click-prompt" class="click-prompt">点击屏幕以开始</div>
        <img src="assets/img/Ui/Logo.png" alt="Logo" style="display: none;">
    </div>
    <div id="game-container" class="hidden">
        <!-- 开始界面 -->
        <div id="start-screen" class="screen">
            <h1 class="pixel-title" id="game-title">校园惊魂·其二(Alpha Version)</h1>

            <div class="start-options">
                <div class="name-input">
                    <label for="player-name">你的名字:</label>
                    <input type="text" id="player-name" placeholder="输入你的名字...">
                </div>
                <div class="gender-selection">
                    <p>选择性别:</p>
                    <div class="gender-options">
                        <button id="male-option" class="gender-btn">男</button>
                        <button id="female-option" class="gender-btn">女</button>
                    </div>
                </div>

                <button id="start-game" class="start-btn" disabled>开始游戏</button>
                <button id="about-btn" class="about-btn">关于</button>
            </div>
            <div class="game-description">
                 <p>因父母工作调动搬至陌生城市，你忐忑入学......</p>
                 <p>入学的第一个晚上夜回宿舍，竟只有你一个人......</p>
              </div>
        </div>

        <!-- 章节选择界面 -->
        <div id="chapter-select-screen" class="screen hidden">
            <button id="back-to-main" class="back-btn">返回主界面</button>
            <h1 class="pixel-title">选择章节</h1>
            <div class="chapter-list">
                <div class="chapter-item available" data-chapter="prologue">
                    <h2>序章-「初入校门」</h2>
                    <p>你的父母来到了新的地区工作，你们搬迁到了这个新的城市，你也来到了新的学校，但是入学第一天，晚上在宿舍里，你发现了一个恐怖的事情...</p>
                </div>

                </div>

            </div>
        </div>

        <!-- 游戏界面 -->
        <div id="game-screen" class="screen hidden">
            <div id="game-header">
                <div id="player-info">
                    <span id="player-name-display"></span> | <span id="player-gender-display"></span>
                </div>
                <div id="game-time">时间: <span id="current-time">21:00</span></div>
            </div>
            <div id="game-container-inner">
                <div id="game-map"></div>
                <div id="game-inventory">
                    <div class="inventory-title">🎒 背包</div>
                    <div id="inventory-items"></div>
                </div>
            </div>
            <div id="game-actions"></div>
            <div id="game-dialogue">
                <div id="dialogue-text"></div>
                <div id="dialogue-choices"></div>
            </div>
        </div>

        <!-- 死亡界面 -->

        <!-- 关于弹窗 -->
        <div id="about-modal" class="modal hidden">
            <div class="modal-content">
                <div class="modal-header">
                    <h2>🏆 关于本作品</h2>
                    <button id="close-about" class="close-btn">×</button>
                </div>
                <div class="modal-body">
                    <p>使用IDE： Trae CN</p>
                    <p>调用AI模型：</p>
                    <p>DeepSeekR1、Kimi-K2、</p>
                    <p>Qwen-3-Coder、Doubao-Seed-1.6</p>
                    <p>特别鸣谢： 神岛实验室</p>
                </div>
            </div>
        </div>
        <div id="death-screen" class="screen hidden">
            <h2 class="death-title">你遭遇了不幸...</h2>
            <div id="death-message"></div>
            <button id="restart-game" class="restart-btn">重新开始</button>
        </div>

        <!-- 结算界面 -->
        <div id="result-screen" class="screen hidden">
            <h1 class="pixel-title">恭喜通关!</h1>
            <div class="result-info">
                <p>章节: <span id="result-chapter"></span></p>
                <p>通关时间: <span id="result-time"></span></p>
            </div>
            <div class="result-actions">
                <button id="next-chapter-btn" class="start-btn">下一章</button>
                <button id="back-to-chapter-select" class="restart-btn">返回章节选择</button>
            </div>
        </div>
    </div>


    <script src="GameJs/Chapter0.js"></script>

    <!-- 游戏版本号定义 -->
    <script>
        // 游戏版本号变量，方便统一修改
        const GAME_VERSION = "R2-1.0.1.1";
    </script>

    <!-- 音效元素 -->
    <audio id="intro-audio" src="assets/audio/Ahahahaha.mp3" preload="auto"></audio>
    <audio id="horror-ding" src="assets/audio/Ding-Horror.mp3" preload="auto"></audio>
    <audio id="horror-up" src="assets/audio/HorrorUp.mp3" preload="auto"></audio>
    <audio id="ghost-ha" src="assets/audio/GhostHa.mp3" preload="auto"></audio>
    <audio id="background-music" src="assets/audio/GhostSing(Sample).mp3" preload="auto" loop></audio>
    <audio id="long-scream" src="assets/audio/LongScream.mp3" preload="auto"></audio>

    <!-- 音效提示弹窗 -->
    <div id="audio-notice-modal" class="modal-overlay hidden">
        <div class="modal-content">
            <h3 id="audio-notice-version">⚠️ Alpha Version</h3>
            <p>测试版本</p>
            <p>不代表最终品质！</p>
            <button id="audio-notice-confirm" class="modal-btn">我知道了</button>
        </div>
    </div>

    <style>
        /* 弹窗样式 */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

        .modal-content {
            background-color: #2a2a2a;
            border: 2px solid #555;
            border-radius: 8px;
            padding: 2rem;
            max-width: 400px;
            text-align: center;
        }

        .modal-btn {
            margin-top: 1rem;
            padding: 0.5rem 1rem;
            background-color: #1e3a8a;
            border: none;
            color: #fff;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .modal-btn:hover {
            background-color: #1e3a8a;
        }

        /* 开场动画样式 */
        .intro-animation {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.95);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 2000;
            opacity: 0;
            animation: fadeIn 1.5s forwards;
        }

        .intro-animation img {
            max-width: 80%;
            max-height: 80%;
            opacity: 0;
        }

        .click-prompt {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 24px;
            text-align: center;
            font-family: 'mplus_hzk_12', sans-serif;
            text-shadow: 0 0 10px #3b82f6;
            animation: pulse 1.5s infinite;
        }

        @keyframes pulse {
            0% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
            }

            50% {
                opacity: 0.7;
                transform: translate(-50%, -50%) scale(1.05);
            }

            100% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
            }
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes stay {
            from {
                opacity: 1;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes fadeOut {
            from {
                opacity: 1;
            }

            to {
                opacity: 0;
                visibility: hidden;
            }
        }

        @keyframes fadeInImg {
            from {
                opacity: 0;
                transform: scale(0.8);
            }

            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            animation: fadeIn 0.3s ease;
        }

        .modal-content {
            background-color: #2a2a2a;
            border: 2px solid #555;
            border-radius: 8px;
            padding: 2rem;
            max-width: 400px;
            text-align: center;
            box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
        }

        .modal-content h3 {
            color: #3b82f6;
            margin-bottom: 1rem;
            font-size: 1.5rem;
        }

        .modal-content p {
            color: #ccc;
            margin-bottom: 0.8rem;
            line-height: 1.5;
        }

        .modal-btn {
            margin-top: 1.5rem;
            padding: 0.8rem 2rem;
            background-color: #333;
            border: 2px solid #555;
            color: #fff;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
            border-radius: 4px;
        }

        .modal-btn:hover {
            background-color: #555;
            border-color: #3b82f6;
            transform: scale(1.05);
        }



        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .hidden {
            display: none !important;
        }
    </style>

    <script>
        // 开场动画逻辑
        document.addEventListener('DOMContentLoaded', function () {
            const introAnimation = document.getElementById('intro-animation');
            const gameContainer = document.getElementById('game-container');
            const audioModal = document.getElementById('audio-notice-modal');
            const introAudio = document.getElementById('intro-audio');
            const logoImg = introAnimation.querySelector('img');
            const clickPrompt = document.getElementById('click-prompt');
            let gameStarted = false;

            // 点击屏幕开始游戏
            function startGame() {
                if (gameStarted) return;
                gameStarted = true;

                // 隐藏点击提示
                clickPrompt.style.display = 'none';

                // 显示并动画logo
                logoImg.style.display = 'block';
                setTimeout(() => {
                    logoImg.style.animation = 'fadeInImg 1.5s forwards 0.5s';
                }, 100);

                // 更新版本号显示
                document.addEventListener('DOMContentLoaded', function () {
                    // 获取版本号元素
                    const gameTitle = document.getElementById('game-title');
                    const versionNumber = document.getElementById('version-number');
                    const audioNoticeVersion = document.getElementById('audio-notice-version');

                    // 更新版本号
                    if (gameTitle) {
                        gameTitle.textContent = `校园惊魂·其二(Version ${GAME_VERSION})`;
                    }
                    if (versionNumber) {
                        versionNumber.textContent = GAME_VERSION;
                    }
                    if (audioNoticeVersion) {
                        audioNoticeVersion.textContent = `⚠️ Version ${GAME_VERSION}`;
                    }
                });

                // 播放开场音频
                introAudio.play().catch(function (error) {
                    console.log('播放音频失败:', error);
                });

                // 动画总时长: 1.5s(fadeIn) + 2s(stay) = 3.5s
                setTimeout(function () {
                    // 停止音频播放
                    introAudio.pause();
                    introAudio.currentTime = 0;
                    // 使用渐隐动画隐藏logo
                    introAnimation.style.animation = 'fadeOut 1.5s forwards';

                    // 移除延迟，在logo开始消失时同时显示主容器和弹窗
                    gameContainer.classList.remove('hidden');
                    audioModal.classList.remove('hidden');
                }, 3500);
            }

            // 为整个页面添加点击事件
            document.body.addEventListener('click', startGame);
            document.body.addEventListener('touchstart', startGame); // 移动设备支持
        });
        // 弹窗逻辑
        document.addEventListener('DOMContentLoaded', function () {
            const audioModal = document.getElementById('audio-notice-modal');
            const audioConfirmBtn = document.getElementById('audio-notice-confirm');

            // 音效提示弹窗逻辑
            audioConfirmBtn.addEventListener('click', function () {
                audioModal.classList.add('hidden');
            });

            // 点击弹窗外部关闭
            audioModal.addEventListener('click', function (e) {
                if (e.target === audioModal) {
                    audioModal.classList.add('hidden');
                }
            });

            // 获取背景音乐元素
            const backgroundMusic = document.getElementById('background-music');

            // 开始游戏按钮逻辑
            const startGameBtn = document.getElementById('start-game');
            const ghostHaAudio = document.getElementById('ghost-ha');

            startGameBtn.addEventListener('click', function () {
                // 播放ghost-ha音频
                ghostHaAudio.play().catch(function (error) {
                    console.error('播放音频失败:', error);
                });
            });

            // 监听游戏界面显示/隐藏事件来控制背景音乐
            const gameScreen = document.getElementById('game-screen');
            const startScreen = document.getElementById('start-screen');
            const chapterSelectScreen = document.getElementById('chapter-select-screen');
            const deathScreen = document.getElementById('death-screen');
            const resultScreen = document.getElementById('result-screen');

            // 检查当前哪个界面显示
            function checkScreenVisibility() {
                if (!gameScreen.classList.contains('hidden')) {
                    // 游戏界面显示，播放背景音乐
                    backgroundMusic.play().catch(function (error) {
                        console.error('播放背景音乐失败:', error);
                    });
                } else {
                    // 非游戏界面显示，暂停背景音乐
                    backgroundMusic.pause();
                }
            }

            // 初始检查
            checkScreenVisibility();

            // 为所有可能切换界面的按钮添加事件监听器
            document.querySelectorAll('button').forEach(button => {
                button.addEventListener('click', function () {
                    // 延迟检查，确保界面已经切换
                    setTimeout(checkScreenVisibility, 100);
                });
            });

            // 监听死亡屏幕显示事件
            const observer = new MutationObserver(function (mutations) {
                mutations.forEach(function (mutation) {
                    if (mutation.attributeName === 'class') {
                        checkScreenVisibility();
                    }
                });
            });

            // 监听所有屏幕的class变化
            [gameScreen, startScreen, chapterSelectScreen, deathScreen, resultScreen].forEach(screen => {
                observer.observe(screen, { attributes: true });
            });
        });

        // 关于按钮和弹窗逻辑
        function setupAboutModal() {
            const aboutBtn = document.getElementById('about-btn');
            const aboutModal = document.getElementById('about-modal');
            const closeAboutBtn = document.getElementById('close-about');

            if (!aboutBtn || !aboutModal || !closeAboutBtn) {
                console.error('无法找到关于按钮或弹窗元素');
                return;
            }

            // 打开关于弹窗
            aboutBtn.addEventListener('click', function () {
                console.log('关于按钮被点击');
                aboutModal.classList.remove('hidden');
                aboutModal.style.display = 'flex';
            });

            // 关闭关于弹窗
            closeAboutBtn.addEventListener('click', function () {
                aboutModal.style.display = 'none';
                aboutModal.classList.add('hidden');
            });

            // 点击弹窗外部关闭弹窗
            aboutModal.addEventListener('click', function (event) {
                if (event.target === aboutModal) {
                    aboutModal.style.display = 'none';
                    aboutModal.classList.add('hidden');
                }
            });
        }

        // 确保DOM完全加载后再设置弹窗
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', setupAboutModal);
        } else {
            setupAboutModal();
        }
    </script>
</body>

</html>